<template>

  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">

        <Select  v-model="model2" style="width:150px">
          <Option value="china">中国</Option>
        </Select>

        <Select v-model="model1" style="width:150px" placeholder="请选择省份">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:150px" placeholder="请选择城市" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <Select v-model="model1" style="width:150px" placeholder="请选择区县">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>


        <DatePicker type="daterange" :options="Dateoptions" placement="bottom-start" placeholder="时间段"
                    style="width: 200px"></DatePicker>

        <Button type="primary" icon="ios-search" loading>搜索</Button>
        <Button type="ghost" @click.prevent.stop="exportExcel()">统计导出</Button>

        <Poptip class="pull-right" placement="bottom-end">
          <Button>说明</Button>
          <div slot="content">
            说明：<br>
            1、站点预警统计模块可通过查询条件，查询一定时间段内，不同地区或站点的预警统计<br>
            2、搜索条件国家项默认为中国，<br>
            当搜索条件选择至省份时，统计图为各城市的预警数据统计；<br>
            当搜索条件选择至城市时，统计图为各区县的预警数据统计；<br>
            当搜索条件选择至区县时，统计图为各站点的预警数据统计，点击其中一个的站点柱状图，统计图变为所选站点不同预警类型的数据统计。<br>
            4、点击统计导出，统计当前及统计图结果导出为Excel表。
          </div>
        </Poptip>

      </div>


      <div id="chart"></div>
    </Card>
    </Row>

  </div>

</template>

<style scoped>
  .top-tip{
    float: right;
    width: 380px;
    padding: 15px;
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    border-radius: 4px;
    line-height: 1.6;
    margin-top: 10px;
    position: absolute;
    right: 24px;
    z-index: 3;
  }
  #chart{
    width: 100%;
    height: 600px;
    margin: 10px auto;
  }
</style>
<script type="text/ecmascript-6">

  //import api from '@/fetch/api';
  import * as echarts from 'echarts';
  import 'echarts/chart/bar';
  import 'echarts/component/toolbox';
  import 'echarts/component/tooltip';
  import 'echarts/component/legend';
  import 'echarts/component/title';
  //import ExportJsonExcel from 'js-export-excel';

  export default {
    beforeMount () {

    },
    mounted() {
      this.initChart()
    },
    data () {
      return {
        loading: true,
        list: {},
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
          model2: 'china',
        option:{},
        Dateoptions: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        },
      }
    },
    methods: {
      exportExcel(){
        let option={};

        option.fileName = 'excel';
        option.datas=[
          {
            sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}],
            //sheetName:'sheet',
            //sheetFilter:['two','one'],
            sheetHeader:['第一列','第二列']
          },
          {
            sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
          }
        ];
        let toExcel=new ExportJsonExcel(option);
        toExcel.saveExcel();
      },
      initChart(){
        let $this = this;
          var myChart = echarts.init(document.getElementById('chart'));
        $this.option = {
          title: {
            text: '气站预警统计图',
            left: 'center'
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : ['A站', 'B站', 'C站', 'D站', 'E站', 'F站', 'G站'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'报警次数',
              type:'bar',
              barWidth: '60%',
              data:[10, 52, 200, 334, 390, 330, 220]
            }
          ]
        };
        myChart.setOption($this.option);
          myChart.on('click', function (params) {
              console.log(params);
              console.log(params.name);
              $this.option.xAxis[0].data = ['A1站', 'B1站', 'C1站', 'D站', 'E站', 'F站', 'G站'];
              $this.option.series[0].data = [100, 152, 20, 334, 390, 30, 20];
              myChart.setOption($this.option);
          });
      },
    }
  };
</script>
